<template>
<div class="layout">
  <NavHeader>
  </NavHeader>

  <div class="content">
    <card>
      <p slot="title">重置密码</p>
      <Form ref="formUser" :model="formUser" :rules="ruleValidate" :label-width="100">

        <Form-item label="账号" prop="username">
          <Row>
            <Col span="12">
              <Input v-model="formUser.username" placeholder="请输入账号" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="手机号" prop="mobile">
          <Row>
            <Col span="12">
              <Input v-model="formUser.mobile" placeholder="请输入手机号" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="验证码" prop="code">
          <Row :gutter="8">
            <Col span="9">
              <Input v-model="formUser.code" placeholder="请输入验证码" />
            </Col>
            <Col span="3">
              <Button type="primary" @click="acquireSmsCode">申请验证码</Button>
            </Col>
          </Row>
        </Form-item>

        <Form-item label="新密码" prop="password">
          <Row>
            <Col span="12">
              <Input type="password" v-model="formUser.password" placeholder="请输入密码" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="确认密码" prop="repeat">
          <Row>
            <Col span="12">
              <Input type="password" v-model="formUser.repeat" placeholder="请输入密码" />
            </Col>
          </Row>
        </Form-item>

        <Form-item>
          <Button type="primary" @click="handleCommit" class="margin-right-sm">重置</Button>
          <Button type="ghost" @click="$router.push('/')">返回</Button>
        </Form-item>
      </Form>
    </card>
  </div>

  <NavFooter>
  </NavFooter>

</div>
</template>

<script>
  import { mapState } from 'vuex'
  import NavHeader from '@/app/Header'
  import NavFooter from '@/app/Footer'
  import HttpApi from '@/service/httpApi'
  import Rest from '@/service/rest'
  import Validation from '@/service/validation'

  export default {
    name: 'forgot',
    components: {
      NavHeader,
      NavFooter
    },
    data () {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.formUser.repeat !== '') {
            // 对第二个密码框单独验证
            this.$refs.formUser.validateField('repeat')
          }
          callback()
        }
      }

      const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.formUser.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }

      return {
        formUser: {
          username: '',
          mobile: '',
          code: '',
          password: '',
          repeat: ''
        },
        ruleValidate: {
          username: [
            {
              required: true,
              message: '用户不能为空'
            },
            {
              min: 4,
              message: '用户名不能少于 4 个字'
            },
            {
              validator: Validation.userNameValidator,
              message: '用户名只能是 数字,字母, ._'
            }
          ],
          mobile: [
            {
              required: true,
              message: '手机号不能为空'
            }
          ],
          code: [
            {
              required: true,
              message: '验证码不能为空'
            }
          ],
          password: [
            {
              required: true,
              message: '密码不能为空'
            },
            { validator: validatePass, trigger: 'blur' }
          ],
          repeat: [
            {
              required: true,
              message: '密码不能为空'
            },
            { validator: validatePassCheck, trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      ...mapState(['user'])
    },
    methods: {
      acquireSmsCode () {
        HttpApi.getResetCode(this.formUser.mobile).then((data) => {
          if (process.env.NODE_ENV === 'development') {
            this.formUser.code = data.code
          }
        })
      },
      handleCommit () {
        this.$refs.formUser.validate((valid) => {
          if (valid) {
            HttpApi.resetPassword(this.formUser).then((data) => {
              this.$Message.success('重置成功')
            }).catch(Rest.errorHandler)
          }
        })
      }
    }
  }
</script>

<style scoped>

.content {
  width: 900px;
  margin: auto;
  padding-top: 32px;
  padding-bottom: 32px;
}

</style>
